<template>
  <div>
    <el-row>
      <el-col :span="21">
        <div>供应商管理</div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-button
            size="small"
            type="success"
            round
            @click="dialogFormVisible = true;addbtn()"
            style="font-size:14px;margin-right:100px"
          >添 加</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table :data="supplierTableData" style="width: 100%">
      <el-table-column prop="business_name" label="供应商名称"></el-table-column>
      <el-table-column prop="person_in_charge" label="负责人"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" style="color:#3dc2c2;">编辑</el-button>
          <el-button @click="remove(scope.row)" type="text" style="color:#dc1033;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="perPage"
      :current-page="page"
      :total="total"
      @current-change="changePage"
      style="margin-top: 15px;"
      background
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
import { supplierShow } from "@/api/supplier";
export default {
  name: "supplier",
  components: {},
  data() {
    return {
      supplierTableData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        productName: "",
        inventory: "",
        sellprice: "",
        productImg: "",
      },
    };
  },
  mounted() {
    this.tablelist();
   
  },
  watch: {
    "$store.state.app.marketId"(val, oldVal) {},
  },
  methods: {
    changePage(num) {
      this.page = num;
    },
    edit(row) {
      console.log(row);
      this.$router.push({
        path:"/select/addSupplier",
        query:{businessId:857,rowquery:row,isshow:2}
      })
    },
    remove(row) {
      this.$store
        .dispatch("supplier/supplierDel", {
          businessId:1,
          supplierId:row.id
        })
        .then(data => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.tablelist();
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    addbtn(){
      this.$router.push({
        path:"/select/addSupplier",
        query:{businessId:857,isshow:1,rowquery:{}}
      })
    },
    tablelist() {
      this.$store
        .dispatch("supplier/supplierShow", {
          businessId:857
        })
        .then(data => {
          // console.log(data);
          this.supplierTableData=data
          // console.log(this.total)
          // if ((this.total - 1) % this.perPage == 0) this.page--;
          // this.getproductMsg();
          // this.$message({
          //   type: "success",
          //   message: "删除成功!"
          // });
        })
        .catch((err) => {
          // console.log(err);
        });
      
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}
// .header{
//   display: flex;
//   justify-content: space-between;
// }
</style>
